<template>
  <div class="wrap">
    <div class="search" v-if="userType==2">
      <el-input placeholder="请输入用户名称" v-model="username"></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
    <div class="search" v-if="userType==1">
      <el-input placeholder="请输入用户名称" v-model="username2"></el-input>
      <el-button type="primary" @click="search2">搜索</el-button>
    </div>
    <div class="role">
      <el-button :type="userType==2?'primary':''" @click="userType=2" class="btns">商家</el-button>
      <el-button :type="userType==1?'primary':''" @click="userType=1" class="btns">用户</el-button>
    </div>
    <div class="shop" v-if="userType==2">
      <div>
        <el-button type="primary" class="btns" @click="toggleSelection">全选</el-button>
        <el-button class="btns" @click="selectAllMu">批量打标签</el-button>
      </div>
      <el-button type="primary" icon="el-icon-plus" @click="tagAddState = true">添加标签</el-button>
    </div>
    <!-- 用户 -->
    <el-table :data="tableData" v-if="userType==1" stripe style="width: 100%">
      <el-table-column label="名称">
        <template slot-scope="scope">
          <div class="userheadInfo">
            <img :src="scope.row.avatar" alt />
            <span>{{scope.row.username}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="follow_total" sortable label="关注数"></el-table-column>
      <el-table-column label="账号密码">
        <template slot-scope="scope">
          <div class="userPass">
            <p>账号：{{scope.row.account}}</p>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="paginationBox" v-if="userType==1">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="userCurrent"
        :page-size="userSize"
        @current-change="currentPagesuser"
      ></el-pagination>
    </div>
    <!-- 商家 -->
    <div class="rableBox" v-if="userType==2">
      <div class="line" style="width: 80%">
        <el-table :data="tableData2" stripe style="width: 100%" ref="multipleTable">
          <el-table-column type="selection" width="30"></el-table-column>
          <el-table-column label="名称" width="200">
            <template slot-scope="scope">
              <div class="userheadInfo">
                <img :src="scope.row.avatar" alt />
                <div>
                  <span>{{scope.row.username}}</span>
                  <div class="okl" @click="addUseTag(scope.row)">
                    <i>{{scope.row.tagList.length?scope.row.tagList[0].tag_name:"无标签"}}</i>
                    <img src="../assets/bota.png" alt />
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sendSet" align="center" width="60" label="代发">
            <template slot-scope="scope">{{scope.row.is_instead==0?'未开':'已开' }}</template>
          </el-table-column>

          <el-table-column prop="follow_total" align="center" width="150" sortable label="粉丝数"></el-table-column>
          <el-table-column width="180" label="账号密码" align="center">
            <template slot-scope="scope">
              <div class="userPass">
                <p>账号：{{scope.row.account}}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="menageState" align="center" width="120" sortable label="是否付费">
            <template slot-scope="scope">{{scope.row==3?'否':'是'}}</template>
          </el-table-column>
          <el-table-column prop="followNum" align="center" width="180" sortable label="会员到期时间">
            <template slot-scope="scope">
              <div class="time">
                <p>{{scope.row.end_time}}</p>
                <p>至</p>
                <p>{{scope.row.end_time}}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="followNum" align="center" width="200" label="状态操作">
            <template slot-scope="scope">
              <div class="setbtn" style="margin-bottom: 15px;">
                <el-button size="mini" type="primary" @click="detailState = true">付费明细</el-button>
                <el-button
                  size="mini"
                  type="warning"
                  @click="canacle(scope.row)"
                >{{scope.row.is_able==1?'禁用':'解禁'}}</el-button>
              </div>
              <div class="setbtn">
                <el-button size="mini" type="primary" @click="setTimeState = true">修改有效期</el-button>
                <el-button size="mini" type="danger" @click="userDele(scope.row)">注销</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="paginationBox">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total2"
            :current-page="currentPage"
            :page-size="pageSize"
            @current-change="currentPages"
          ></el-pagination>
        </div>
      </div>
      <div class="tagsBox">
        <div class="titll">
          <p>全部商家({{bizConent.bizCount}})</p>
          <p>代发商家({{bizConent.bizIsInsteadCount}})</p>
        </div>
        <ul>
          <li v-for="item in tagLists" :key="item.tag_id">
            <p @click="sbz(item)">{{item.tag_name}}（{{item.total}}）</p>
            <el-button type="danger" size="mini" @click="deleTag(item.tag_id)">删除</el-button>
          </li>
        </ul>
      </div>
    </div>
    <setTimePage :setTimeState="setTimeState" @setTimeData="setTimeData"></setTimePage>
    <detail :detailState="detailState" @lookDetail="lookDetail"></detail>
    <resetPage :ressetState="ressetState" @resetData="resetData" :userId="userId"></resetPage>
    <tagAddPage :tagAddState="tagAddState" @tagMeth="tagMeth"></tagAddPage>
    <addUserTag :addUserStateTag="addUserStateTag" :tagusidList="tagusidList" :tagLists="tagLists" @getUserTag="getUserTag"></addUserTag>
    <selectMU :selectAllMuState="selectAllMuState" :tagLists="tagLists" @getSelectMu="getSelectMu"></selectMU>
  </div>
</template>
<style lang="scss" scoped>
.wrap {
  margin-top: 30px;
}
.search {
  display: flex;
  align-items: center;
  .el-input {
    width: 300px;
    margin-right: 15px;
  }
}
.role {
  margin-top: 30px;
  .el-button {
    width: 150px;
    height: 30px;
    padding: 0;
  }
}
.userheadInfo {
  display: flex;
  align-items: center;
  > img {
    display: block;
    width: 30px;
    height: 30px;
    background: red;
    border-radius: 50%;
    margin-right: 15px;
  }
  span {
    color: #999;
    font-size: 14px;
  }
  i {
    display: block;
    padding: 4px 6px;
    font-size: 12px;
    color: #999;
    border: 0.5px solid #999;
    font-style: normal;
    border-radius: 20px;
    text-align: center;
    line-height: 1;
    max-width: 60px;
    margin-right: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  .okl {
    display: flex;
    align-items: center;
    cursor: pointer;
    > img {
      width: 10px;
    }
  }
}
.userPass {
  p {
    color: #999;
    font-size: 14px;
  }
}
.time {
  p {
    text-align: center;
    font-style: 14px;
    color: #999;
  }
}
.setbtn {
  display: flex;
  justify-content: space-between;
  .el-button {
    width: 85px;
  }
}
.shop {
  display: flex;
  margin-top: 30px;
  justify-content: space-between;
  .el-button {
    height: 30px;
    line-height: 30px;
    padding: 0 25px;
  }
}
.rableBox {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  .line {
    border-top: 0.5px solid #e5e5e5;
    padding-top: 0.5px;
  }
  .tagsBox {
    width: 220px;
    border: 0.5px solid #e5e5e5;
    border-radius: 4px;
    padding: 0 10px;
    .titll {
      display: flex;
      justify-content: space-between;
      border-bottom: 0.5px solid #e5e5e5;
      p {
        font-size: 12px;
        color: #999;
        line-height: 34px;
        cursor: pointer;
      }
    }
    ul {
      list-style-type: none;
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 8px 0;
        p {
          font-size: 12px;
          color: #999;
          line-height: 34px;
          cursor: pointer;
        }
        .el-button {
          height: 20px;
          padding-top: 0;
          padding-bottom: 0;
          line-height: 20px;
        }
      }
    }
  }
}
.btns {
  width: 150px;
}
.paginationBox {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>

<script>
import setTimePage from "./setTime";
import detail from "./detail";
import resetPage from "./setReset";
import tagAddPage from "./tagAdd";
import addUserTag from "./addUserTag";
import selectMU from "./selectMU";
import {
  bizUserList,
  userEdit,
  userDelete,
  customerUserList,
  tagAdd,
  tagList,
  getBizCount,
  tagUserSave,
  tagDele
} from "@/utils/interface";
export default {
  components: {
    setTimePage,
    detail,
    resetPage,
    tagAddPage,
    addUserTag,
    selectMU
  },
  data() {
    return {
      userType: 2,
      tableData: [],
      tableData2: [],
      setTimeState: false,
      detailState: false,
      ressetState: false,
      pageSize: 10,
      currentPage: 1,
      total: 0,
      total2: 0,
      pageCount2: 1,
      userId: "",
      userSize: 10,
      userCurrent: 1,
      pageCount: 1,
      username: "",
      username2: "",
      bok1: false,
      bok2: false,
      tagAddState: false,
      tagLists: [],
      bizConent: {},
      addUserStateTag: false,
      selectAllState: true,
      tagusid: "",
      selectAllMuState: false,
      tagId:"",
      tagusidList:[]
    };
  },
  methods: {
    setTimeData(e) {
      this.setTimeState = false;
    },
    lookDetail(e) {
      this.detailState = false;
    },
    // 注销
    resetData(e) {
      if (e) {
        userDelete(e).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "注销成功!"
            });
            this.bizUserList();
          }
        });
      }
      this.ressetState = false;
    },
    // 禁用
    canacle(e) {
      if (e.isAble == 0) {
        this.$confirm("是否禁用此账户?", "提示", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning"
        }).then(() => {
          userEdit({ userId: e.user_id, isAble: "0" }).then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "禁用成功!"
              });
              this.bizUserList();
            }
          });
        });
      } else {
        this.$confirm("是解禁用此账户?", "提示", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning"
        }).then(() => {
          userEdit({ userId: e.user_id, isAble: "1" }).then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "解用成功!"
              });
              this.bizUserList();
            }
          });
        });
      }
    },
    // 获取商家列表
    bizUserList(username,tagId) {
      bizUserList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        username,
        tagId
      }).then(res => {
        this.total2 = res.data.data.total;
        this.tableData2 = res.data.data.list;
        this.pageCount2 = Math.ceil(this.total2 / this.pageSize);
      });
    },
    // 注销
    userDele(e) {
      this.userId = e.user_id;
      this.ressetState = true;
    },
    // 商家改变页数
    currentPages(e) {
      console.log(e);
      this.currentPage = e;
      if (this.bok1) {
        this.bizUserList(this.username);
      } else {
        this.bizUserList();
      }
    },
    // 用户改变页数
    currentPagesuser(e) {
      this.userCurrent = e;
      if (this.bok1) {
        this.customerUserList(this.username2);
      } else {
        this.customerUserList();
      }
    },
    // 获取客户列表
    customerUserList(username) {
      customerUserList({
        currentPage: this.userCurrent,
        pageSize: this.userSize,
        username
      }).then(res => {
        this.total = res.data.data.total;
        this.tableData = res.data.data.list;
        this.pageCount = Math.ceil(this.total / this.userSize);
      });
    },
    // 搜索商家
    search() {
      this.bok1 = true;
      this.pageCount = 1;
      this.bizUserList(this.username);
    },
    // 搜索客户
    search2() {
      this.bok2 = true;
      this.userCurrent = 1;
      this.customerUserList(this.username2);
    },
    // 新增标签
    tagMeth(e) {
      console.log(e);
      if (e) {
        tagAdd(e).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "添加成功!"
            });
            this.getTagList();
          }
        });
      }
      this.tagAddState = false;
    },
    // 删除标签
    deleTag(id) {
      this.$confirm("是否删除该标签, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          tagDele([id]).then(res => {
            if (res.data.code == 200) {
              this.getTagList();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 标签列表
    getTagList() {
      tagList().then(res => {
        this.tagLists = res.data.data;
        console.log(res.data.data, "标签");
      });
    },
    // 获取商家数量
    getBizCount() {
      getBizCount().then(res => {
        this.bizConent = res.data.data;
        console.log(this.bizConent, "asdfh");
      });
    },
    // 给单个用户打标签
    addUseTag(e) {
      this.tagusid = e.user_id;
      this.tagusidList = e.tagList
      this.addUserStateTag = true;
    },

    getUserTag(e) {
      if(e){
        tagUserSave({ tagId: e.tag_id_list, userIds:  this.tagusid}).then(
          res => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "添加成功!"
              });
              this.bizUserList();
               this.getTagList();
              this.$refs.multipleTable.clearSelection();
            }
          }
        );
      }
      this.addUserStateTag = false;
    },
    // 给多个用户打标签
    selectAllMu() {
      this.selectAllMuState = true;
    },
    getSelectMu(e) {
      if (e) {
        let users = [];
        this.$refs.multipleTable.selection.map(item => {
          users.push(item.user_id);
        });
        tagUserSave({ tagId: e.tag_id_list, userIds: users.toString() }).then(
          res => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "添加成功!"
              });
              this.bizUserList();
               this.getTagList();
              this.$refs.multipleTable.clearSelection();
            }
          }
        );
      }
      this.selectAllMuState = false;
    },
    // 表格全选
    toggleSelection(rows) {
      if (this.selectAllState) {
        this.tableData2.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 
    sbz(item){
      console.log(item.tag_id)
      this.tagId = item.tag_id
      this.bizUserList(this.username,this.tagId )
    }
  },

  mounted() {
    this.bizUserList();
    this.customerUserList();
    this.getTagList();
    this.getBizCount();
  }
};
</script>